<%= include ic/admin-header.html %>

<div class="am-cf admin-main">
  <%= include ic/admin-sidebar.html %>

  <!-- content start -->
  <div class="admin-content">

    <div class="am-cf am-padding">
      <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">首页栏目管理</strong> / <small>Home Catagory</small></div>
    </div>

    <div class="am-g">
      <div class="am-u-sm-12 am-u-md-5">
        <div class="am-input-group am-input-group-sm">
          <input id="newCatagory" type="text" class="am-form-field" placeholder="输入栏目标题">
          <span class="am-input-group-btn">
            <button class="am-btn am-btn-default" type="button" onclick="addCatagory('image')">新增图片栏目</button>
            <button class="am-btn am-btn-default" type="button" onclick="addCatagory('news')">新增新闻栏目</button>
            <button class="am-btn am-btn-default" type="button" onclick="addCatagory('trip')">新增游迹栏目</button>
          </span>
        </div>
      </div>
      <div class="am-u-sm-12 am-u-md-offset-5 am-u-md-2">
        <div class="am-btn-toolbar am-fr">
          <div class="am-btn-group am-btn-group-xs">
            <button class="am-btn am-btn-default btn-saveEdit" type="button" onclick="save()">保存修改</button>
          </div>
        </div>
      </div>
    </div>
    <hr id="mainhr" />
    <% for(var i=0;i<results.length;i++){ %>
    <div class="catagory" title="<%= results[i].title %>" type="<%= results[i].type %>">
      <div class="am-g">
        <div class="am-u-sm-12 am-u-md-8">
          <b><%= results[i].title %></b>
          <a href="javascript:void(0)" onclick="upCatagory(this)"><i class="am-icon-arrow-up"></i></a>
          <a href="javascript:void(0)" class="btnClose" onclick="delCatagory(this)"><i class="am-icon-close"></i></a>
        </div>
        <div class="am-u-sm-12 am-u-md-4">
          <div class="am-input-group am-input-group-sm">
            <input type="text" class="am-form-field" placeholder="输入ID号">
            <span class="am-input-group-btn">
              <button class="am-btn am-btn-default" type="button" onclick="addItem('<%= results[i].type %>',this)">新增<% if(results[i].type=='image') { %>图片<% }else if(results[i].type=='trip') { %>游迹<% }else if(results[i].type=='news') { %>新闻<% } %></button>
            </span>
          </div>
        </div>
      </div>
      <ul class="imgList am-avg-sm-3 am-cf">
        <% for(var j=0;j<results[i].item.length;j++){ %>
        <li class="item" image="<%= results[i].item[j].image %>" title="<%= results[i].item[j].title %>" objid="<%= results[i].item[j].id %>">
          <a href="/<%= results[i].type %>/detail?id=<%= results[i].item[j].id %>" target="_blank"><img src="/p?id=<%= results[i].item[j].image %>&w=600" onload="fixImg()" alt="<%= results[i].item[j].title %>"></a>
          <span><a href="javascript:void(0)" onclick="upItem(this)"><i class="am-icon-arrow-up"></i></a><a href="javascript:void(0)" class="btnClose" onclick="delItem(this)"><i class="am-icon-close"></i></a></span>
        </li>
        <% } %>
      </ul>
    </div>
    <% } %>
  </div>
  <!-- content end -->
</div>
<a class="am-icon-btn am-icon-th-list am-show-sm-only admin-menu" data-am-offcanvas="{target: '#admin-offcanvas'}"></a>
<style>
.catagory{padding:5px 10px}
.btnClose{color:#a00;}
.catagory .am-g{background:#eee;padding:10px 0;line-height:36px;}
.imgList{width:100%;padding:0;list-style-type:none;}
.imgList>li{overflow:hidden;border:20px solid #fff;position:relative;overflow:hidden;}
.imgList>li img{width:auto;height:auto;}
.imgList>li span{width:auto;height:auto;border:1px solid #ccc;position:absolute;top:0;right:0;text-align:right;}
.imgList>li span a{padding:5px 10px;font-size:2rem;}
</style>
<%= include ic/admin-footer.html %>
<script type="text/javascript">
var $loading = $("#my-modal-loading");
$(function() {
	$("#collapse-setting").addClass("am-in");
  $(window).resize(function(){
    fixImg();
  });
});

function addCatagory(type){
  var typeName  = "新闻";
  var title     = $.trim($("#newCatagory").val());
  if(title.length>0){
    if(type=="image")typeName  = "图片";
    if(type=="trip")typeName   = "游迹";
    $("#newCatagory").val("");
    var html  ='<div class="catagory" title="'+title+'" type="'+type+'">'+
               ' <div class="am-g">'+
               ' <div class="am-u-sm-12 am-u-md-8">'+
               '  <b>'+title+'</b>'+
               '  <a href="javascript:void(0)" onclick="upCatagory(this)"><i class="am-icon-arrow-up"></i></a>'+
               '  <a href="javascript:void(0)" class="btnClose" onclick="delCatagory(this)"><i class="am-icon-close"></i></a>'+
               ' </div>'+
               ' <div class="am-u-sm-12 am-u-md-4">'+
               '  <div class="am-input-group am-input-group-sm">'+
               '    <input type="text" class="am-form-field" placeholder="输入ID号">'+
               '    <span class="am-input-group-btn">'+
               '      <button class="am-btn am-btn-default" type="button" onclick="addItem(\''+type+'\',this)">新增'+typeName+'</button>'+
               '    </span>'+
               '  </div>'+
               ' </div>'+
               ' </div>'+
               ' <ul class="imgList am-avg-sm-3 am-cf"></ul>'+
               '</div>';
      $("#mainhr").after(html);
    }else{
      mAlert({
        title:"错误",
        text:"栏目标题不能为空！",
        onConfirm:function(e) {}
      });
    }
}

function addItem(type,obj){
  //console.dir(tagArr);
  //$loading.modal('open');
  var o=$(obj).parent().parent().parent().parent().parent();
  var typeName  = "新闻";
  if(type=="image")typeName  = "图片";
  if(type=="trip")typeName   = "游迹";
  var tagText = $.trim($(o).find("input").val());
  //console.log(tagText);
  if(tagText.length==0){
    $loading.modal('close');
    mAlert({
      title:"错误",
      text:"不能为空值！",
      onConfirm:function(e) {}
    });
  }else{
    if($(o).find(".item[objid='"+tagText+"']").size()>0){
      $loading.modal('close');
      mAlert({
        title:"错误",
        text:"请勿在同一个栏目中重复添加相同的"+typeName+"！",
        onConfirm:function(e) {}
      });
    }else{
      $.post("/admin/config/getItem?ajax=1&id="+tagText
      +'&type='+type,function(data){
        $loading.modal('close');
        if(data.error){
          mAlert({
            title:"错误",
            text:typeName+"不存在！",
            onConfirm:function(e) {}
          });
        }else{
          $(o).find("input").val('');
          var item=data.result;
          var html='<li class="item" image="'+item.image
                    +'" title="'+item.title+'" objid="'+item.id+'">'
            +'<a href="/'+type+'/detail?id='+item.id+'" target="_blank">'
            +'<img src="/p?id='+item.image+'&w=600" onload="fixImg()" alt="'
            +item.title+'"></a>'
            +'<span>'
            +'<a href="javascript:void(0)" onclick="upItem(this)">'
            +'<i class="am-icon-arrow-up"></i></a>'
            +'<a href="javascript:void(0)" class="btnClose" onclick="delItem(this)">'
            +'<i class="am-icon-close"></i></a></span>'
            +'</li>';
          $(o).find('ul').append(html);
          //$("#bannerList").append('<div class="am-u-sm-12"></div>');
        }
      }, "json")
    }
  }
}

function delCatagory(obj){
  //console.log($(obj).parent().parent(".item").html());
  $(obj).parent().parent().parent(".catagory").remove();
}

function delItem(obj){
  //console.log($(obj).parent().parent(".item").html());
  $(obj).parent().parent(".item").remove();
}

function upCatagory(obj){
  var o=$(obj).parent().parent().parent(".catagory");
  $(o).insertBefore($(o).prev());
  //console.log($(obj).parent().parent(".banner").html());
  //$(obj).parent().parent(".banner").remove();
}

function upItem(obj){
  var o=$(obj).parent().parent(".item");
  $(o).insertBefore($(o).prev());
  //console.log($(obj).parent().parent(".banner").html());
  //$(obj).parent().parent(".banner").remove();
}

function save(){
  $loading.modal('open');
  var catagoryArr=[];
  $(".catagory").map(function(){
    var obj={};
    obj.title = $(this).attr("title");
    obj.type  = $(this).attr("type");
    obj.item  = [];
    $(this).children('.imgList').children('.item').each(function(index,element){
      var item={};
      item.id     = $(element).attr("objid");
      item.image  = $(element).attr('image');
      item.title  = $(element).attr('title');
      obj.item.push(item);
      //console.log(element);
    });
    catagoryArr.push(obj);
  });
  //console.log(catagoryArr);
  $.post("./saveCatagory", {
    "ajax"			     : true,
    "catagoryArr"		 : JSON.stringify(catagoryArr)
  },function(data){
    $loading.modal('close');
    //$.AMUI.progress.done();
    $(".btn-saveEdit").removeClass("am-disabled");
    if(typeof(data)=="object" && typeof(data.error)=="undefined"){
      mAlert({
        title:"提示",
        text:"保存成功！",
        onConfirm:function(e) {
          location.reload();
        }
      });
    }else{
      //console.dir(data);
      mAlert({
        title:"错误",
        text:data.error,
        onConfirm:function(e) {}
      });
    }
  }, "json");
}

function fixImg(){
  $(".imgList li").height($(".imgList li").first().width());
  $(".imgList li").map(function(){
    var w=$(this).innerWidth();
    if($(this).children("a").children("img").width()/$(this).children("a").children("img").height()>1){
      $(this).children("a").children("img").height(w);
      $(this).children("a").children("img").css("width","auto");
    }else{
      $(this).children("a").children("img").width(w);
      $(this).children("a").children("img").css("height","auto");
    }
  });
}
</script>
